<template>
  <div class="carRecord-box">
    <div class="carRecord-content">
      <div class="title">24小时车辆进出纪录</div>
      <!--24小时车辆进出纪录图-->
      <div class="carRecord"></div>
      <!--报警总数-->
      <div class="pass-legend">
        <template>
          <div><span class="entry-color"></span><i>进</i></div>
          <div><span class="exit-color"></span><i>出</i></div>
        </template>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: 'carEntryExitRecord',
  data () {
    return {
      carEntryData: [8, 4, 2, 1, 3, 7, 15, 23, 46, 35, 63, 44, 24, 66, 53, 65, 45, 78, 96, 112, 89, 67, 55, 42, 20, 8, 21], // 车辆入数据
      carExitData: [8, 3, 1, 2, 4, 9, 45, 76, 96, 87, 63, 56, 23, 57, 34, 64, 61, 17, 22, 16, 22, 55, 43, 32, 30, 8, 21] // 车辆出数据
    }
  },
  mounted () {
    this.echartFun()
  },
  methods: {
    echartFun () {
      let newArr = []
      for (let i = 0; i < this.carExitData.length; i++) {
        newArr.push(this.carExitData[i] * -1)// 将获取到的车辆出的数据取反
      }
      let charts = this.$echarts.init(
        document.getElementsByClassName('carRecord')[0]
      )
      let option = {
        color: ['#3398DB'],
        // title: {
        //   text: '24小时车辆进出纪录',
        //   textStyle: {
        //     color: '#fff',
        //     fontSize: 12,
        //     fontWeight: 'normal'
        //   },
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {
            var str = '<div style="padding: 10px 20px;">'
            // alert(JSON.stringify(params));
            str += '<p">' + params[0].name + '</p>'
            str += '<div>' + params[0].seriesName + ' : ' + params[0].value + '</div>'
            str += '<div>' + params[1].seriesName + ' : ' + (-params[1].value) + '</div>'
            str += '</div>'
            return str
          }
        },
        grid: {
          left: '0',
          right: '0',
          top: '20%',
          bottom: 0,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            position: 'top',
            axisTick: { // 标签刻度线
              alignWithLabel: true,
              show: false
            },
            axisLabel: { // 刻度数值
              textStyle: {
                fontSize: 10,
                color: '#9FACC3'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#9FACC3',
                opacity: '0.5'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#9FACC3',
                opacity: '0.3'
              }
            },
            data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25]
          },
          { // 让底下坐标不被覆盖且有下线
            type: 'category',
            show: false,
            axisTick: {
              alignWithLabel: true,
              show: false
            },
            axisLabel: {
              textStyle: {
                fontSize: 10,
                color: '#9FACC3'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#9FACC3',
                opacity: '0.5'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#9FACC3',
                opacity: '0.3'
              }
            },
            data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25]
          }
        ],
        yAxis: [
          {
            axisTick: {
              show: false,
              alignWithLabel: true
            },
            type: 'value',
            boundaryGap: true,
            // min:2,
            splitNumber: 6,
            scale: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#9FACC3'
              },
              formatter: function (v) { // 让y轴上下坐标都为正
                return Math.abs(v)
              }
            },
            axisLine: {
              lineStyle: {
                width: 0
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#9FACC3',
                opacity: '0.3'
              }
            }
          }
        ],
        series: [
          {
            name: '进',
            type: 'bar',
            barGap: '8%',
            barWidth: 5,
            stack: 'one',
            // barWidth: "60%",
            itemStyle: {
              normal: {
                color: '#50E3C2',
                label: {
                  position: 'Top'
                }
              }
            },
            data: this.carEntryData
          },
          {
            name: '出',
            type: 'bar',
            stack: 'one',
            barGap: '8%',
            barWidth: 5,
            // barWidth: "60%",
            itemStyle: {
              normal: {
                color: '#F488AC',
                label: {
                  position: 'Top'
                }
              }
            },
            data: newArr
          }
        ]
      }
      charts.setOption(option, true)
    }

  },
  computed: {},
  watch: {}
}
</script>

<style lang="less" scoped>
  .carRecord-box {
    width: 100%;
    margin-bottom: 10px;
  }

  .carRecord-content {
    position: relative;
    width: 100%;
    /*height: 200px;*/
    background: rgba(43, 54, 72, 0.95);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 13px;
    box-sizing: border-box;
    .title{
      position: relative;
      top:0px;
      left:8px;
      color:#fff;
      font-size: 12px;
      font-weight: 600;
    }
  }

  .carRecord {
    width: 100%;
    height: 210px;
  }

  .pass-legend {
    position: absolute;
    top: 16px;
    left: 170px;
    width: 80px;
    /*height: 70px;*/
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .pass-legend i {
    font-style: normal;
    color: #9FACC3;
    font-size: 12px;
  }

  .pass-legend span {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    width: 8px;
    height: 8px;
    display: inline-block;
    margin-right: 9px;
  }

  .entry-color {
    background: #50E3C2;
  }

  .exit-color {
    background: #F488AC;
  }

  .pass-legend div {
    width: 40%;
    line-height: 10px;
    color: #fff;
    /*display: flex;*/
    /*justify-content: space-between;*/
    margin-right: 10%
  }

</style>
